/**
* 作者 ：食草狂魔
*
* 日期 ：2017/10/26
*
* 描述 ：系统管理 - 部门管理
*/
<template>
  <el-container class="is-vertical">
    <HeaderBar :menuState="menuState"></HeaderBar>
    <BreadCrumb :options="breadOptions" class="breadcreamb"></BreadCrumb>
    <el-container class="is-horizontal systemManageContainer">
      <el-aside>
        <div class="treeBar">
          <div class="treeTitle">
            <h5>系统管理</h5>
          </div>
          <LeftBar :leftState="leftState"></LeftBar>
        </div>
      </el-aside>
      <el-main>
        <ModuleBar :title="moduleBarTitle" class="roleTitle"></ModuleBar>
        <MTable :options="tableOptions" ref="myTable" class="tablebar"></MTable>
      </el-main>
    </el-container>
    <Dialog :options="dialogOptions" class="addDepartmentDialog">
      <AddDepartmentForm slot="dialogContent" :parentModel="departmentModel" v-if="dialogOptions.visible"></AddDepartmentForm>
    </Dialog>
    <Dialog :options="dialogOptions2" class="addDepartmentDialog">
      <UpdateDepartmentForm slot="dialogContent" :updateDepartmentformData="updateDepartmentformData" v-if="dialogOptions2.visible"></UpdateDepartmentForm>
    </Dialog>
  </el-container>
</template>
<script>
  import departmentAPIs from '../../api/departmentAPIs'
  import HeaderBar from '../../components/header/Header.vue'
  import BreadCrumb from '../../components/breadcrumb/BreadCrumb.vue'
  import LeftBar from './components/LeftBar.vue'
  import ModuleBar from '../../components/modulebar/ModuleBar.vue'
  import MTable from '../../components/table/Table.vue'
  import Dialog from '../../components/dialog/Dialog.vue'
  import AddDepartmentForm from './components/addDepartmentForm/addDepartmentForm.vue'
  import UpdateDepartmentForm from './components/updateDepartmentForm/UpdateDepartmentForm.vue'

  export default {
    name: 'department',
    components: {
      HeaderBar,
      BreadCrumb,
      LeftBar,
      ModuleBar,
      MTable,
      Dialog,
      AddDepartmentForm,
      UpdateDepartmentForm
    },
    data () {
      return {
        menuState: "/systemManage/main",
        leftState: "/systemManage/department",
        breadOptions:{
          bread:[
            {
              label:"政务数据资源管理系统",
              path:"/"
            },{
              label:"系统管理",
              path:"/systemManage/main"
            }
          ]
        },
        dialogOptions: {
          visible: false,
          title: "添加部门"
        },
        dialogOptions2: {
          visible: false,
          title: "编辑部门"
        },
        moduleBarTitle: "部门管理",
        tableOptions: {
          handleSelectionChange(rows) {
          }
        },
        createTimeToStart: +new Date("1971/01/01 00:00:00"),
        createTimeToEnd: +new Date("2030/01/01 00:00:00"),
        departmentModel: this,
        updateDepartmentformData: {}
      }
    },
    mounted: function () {
      let vm = this,
        pageNo = 1,
        pageSize = 20;

      vm.loadData(pageNo, pageSize)
    },
    methods: {
      loadDepartmentData (params) {
        let vm = this
        departmentAPIs.list(params).then(({ data }) => {
//          console.log(data)
          if(data.code == 10000){
            vm.initTable(data.data, params.pageNum, params.pageSize, data.total)
          }
        })
      },
    	loadData(pageNo, pageSize){
    	  let vm = this
        departmentAPIs.list({
          pageNum: pageNo,
          pageSize: pageSize,
          token: localStorage.token,
          createTimeToStart: vm.createTimeToStart,
          createTimeToEnd: vm.createTimeToEnd
        }).then(({ data }) => {
          console.log(data)
          if(data.code == 10000){
            vm.initTable(data.data, pageNo, pageSize, data.total)
          }
        })
    	},
      initTable(dataList, pageNo, pageSize, total) {
        let vm = this
        let vuex = vm.$store.state.systemManage.pages.department
        vm.tableOptions = {
          thead: [{
            prop: "sysDepartmentCode", // 数据的key值
            label: "部门编号", // 显示的标题
          }, {
            prop: "sysDepartmentName", // 数据的key值
            label: "部门", // 显示的标题
          }, {
            prop: "description", // 数据的key值
            label: "部门简述", // 显示的标题
          }],
          operation: {
            items: [{
              xtype: "link",
              buttonText: "查看",
              onClick(i, row) {
//                alert(`我要查看${JSON.stringify(row)}`)
                vm.updateDepartmentformData = row
                vm.dialogOptions2.visible = true
              }
            },{
              xtype: "link",
              buttonType: "danger", // 按钮样式
              buttonText: "删除",
              style: "color:red;",
              onClick(i, row) {
                vm.$confirm('确认删除此用户吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  departmentAPIs.delete({
                    key: row.sysDepartmentId,
                    token: localStorage.token
                  }).then(({data}) => {
                    if (data.code == 10000) {
                      vm.$message.success("删除成功！");
                      vm.loadData(vm.tableOptions.pageInfo.currentPage, vm.tableOptions.pageInfo.pageSize)
                    }
                    else {
                      vm.$message.error(`${data.msg}`);
                    }
                  })
                })
              }
            }]
          },
          data: dataList,
          pageInfo: {
            currentPage: pageNo,
            pageSizes: [20, 40, 60, 80],
            pageSize: pageSize,
            layout: "prev, pager, next, total, sizes, jumper",
            total: total,
            handleSizeChange(val) {
              vm.tableOptions.pageInfo.pageSize = val
              vm.loadDepartmentData({
                pageNum: vm.tableOptions.pageInfo.currentPage,
                pageSize: vm.tableOptions.pageInfo.pageSize,
                token: localStorage.token,
                createTimeToStart: +vuex.createTimeToStart || vm.createTimeToStart,
                createTimeToEnd: +vuex.createTimeToEnd>0?+vuex.createTimeToEnd+24*60*60*1000:"" || vm.createTimeToEnd,
                searchContent: vuex.searchContent
              })
            },
            handleCurrentChange(val) {
              vm.tableOptions.pageInfo.currentPage = val
              vm.loadDepartmentData({
                pageNum: vm.tableOptions.pageInfo.currentPage,
                pageSize: vm.tableOptions.pageInfo.pageSize,
                token: localStorage.token,
                createTimeToStart: +vuex.createTimeToStart || vm.createTimeToStart,
                createTimeToEnd: +vuex.createTimeToEnd>0?+vuex.createTimeToEnd+24*60*60*1000:"" || vm.createTimeToEnd,
                searchContent: vuex.searchContent
              })
            }
          },
          handleSelectionChange(rows) {
            console.log(rows)
          },
          selection: {
            width: 55
          },
          toolbar: [{
            xtype: "toolbarRow",
            items: [{
              xtype: "text",
              defaultText: "部门名称/编号",
              ref: "departmentName",
              containerStyle:"margin-right:20px",
              value: vuex.searchContent
            },{
              xtype: "datepicker",
              defaultText: "起始时间",
              ref: "startTime",
              containerStyle:"margin-right:20px",
              value: vuex.createTimeToStart==""?"":new Date(vuex.createTimeToStart)
            },{
              xtype: "datepicker",
              defaultText: "终止时间",
              ref: "endTime",
              containerStyle:"margin-right:20px",
              value: vuex.createTimeToEnd==""?"":new Date(vuex.createTimeToEnd)
            }, {
              xtype: "button",
              buttonType: "primary", // 按钮样式
              buttonText: "查询",
              className: "firButton",
              style:"width:100px;background: #076dc1;margin-right:20px;padding:0;height:40px",
              onClick() {
                let params = {
                  searchContent: vm.$refs.myTable.getRefs("departmentName").$refs.input.value,
                  createTimeToStart: vm.$refs.myTable.getRefs("startTime").value || "",
                  createTimeToEnd: vm.$refs.myTable.getRefs("endTime").value || ""
                }
                // 查询条件记录到状态树
                vm.$store.dispatch('searchDepartmentTable', params)

                vm.loadDepartmentData({
                  pageNum: vm.tableOptions.pageInfo.currentPage,
                  pageSize: vm.tableOptions.pageInfo.pageSize,
                  token: localStorage.token,
                  createTimeToStart: +vuex.createTimeToStart || vm.createTimeToStart,
                  createTimeToEnd: +vuex.createTimeToEnd>0?+vuex.createTimeToEnd+24*60*60*1000:"" || vm.createTimeToEnd,
                  searchContent: vuex.searchContent
                })
              }
            }, {
              xtype: "button",
              buttonType: "primary", // 按钮样式
              buttonText: "添加",
              className: "",
              style:"width:100px;background: #076dc1;margin-right:20px;padding:0;height:40px",
              onClick() {
                vm.dialogOptions.visible = true
              }
            }]
          }]
        }
      }
    }
  }
</script>
<style>
  @import './stylus/common.styl';
  .systemManageContainer .roleTitle{
  	width: 100%;
  	margin-bottom: 20px;
  }
</style>
